<!-- 出车前检查 -->
<template>
	<view>
		<view class="add-box">
			<view class="info  radius">
				<view class="info-label">
					<text>运输信息</text>
				</view>
				<view class="uni-flex">
					<view class="info-item">
						<text class="text">车牌号</text>
						<input class="input" type="text" v-model="info.vehCode" />
					</view>
					<view class="info-item">
						<text class="text">挂车牌号</text>
						<input class="input" type="text" v-model="info.trailerVehCode" />
					</view>
				</view>
				<view class="info-item">
					<text class="text">检查时间</text>
					<input type="text" v-model="info.datetime" class="input" disabled />
				</view>
				<view class="info-item">
					<text class="text">天气情况</text>
					<select-weather class="input" placeholder="请选择天气情况" v-model="info.weather"></select-weather>
				</view>
				<view class="info-item">
					<text class="text">表显里程</text>
					<input class="input" type="text" v-model="info.mileage" placeholder="请输入里程表数" />
					<text class="text">KM</text>
				</view>
			</view>

			<view v-for="(items,index) in listData" :key="items.id">
				<view class="info  radius">
					<view class="info-label">
						<text>{{items.checkPro}}</text>
					</view>
					<view class="info-item info-content">
						<text>{{items.checkContent}}</text>
					</view>
					<view class="info-item">
						<radio-group @change="(e)=>radioChange(e,items.id)" class="car-state-group">
							<view class="car-state-item" v-for="(item, index) in carState" :key="item.value">
								<label style="display: flex;align-items: center;">
									<radio :value="item.value" color="#FFD14A"
										:checked="index === info.carState[items.id]" />
									<text style="font-size: 30rpx;">{{item.name}}</text>
								</label>
							</view>
						</radio-group>
					</view>
				</view>
			</view>


			<view class="info  radius">
				<textarea class="info-textarea" placeholder="请输入检查内容" v-model="info.logContent" />
			</view>
			<view class="info  radius">
				<view class="file-list clearfix">
					<view class="file-item" v-for="(item,index) in info.fileList">
						<image class="file-img" :src="item.temp" mode="aspectFit"></image>
						<view class="file-del" @click="fileDel(index)"></view>
					</view>
					<view class="file-item file-upload-btn" @click="selectFile"></view>
				</view>
			</view>

			<view class="add-btns">
				<view class="btn-cancel" @click="cancel">
					<text>取 消</text>
				</view>
				<view class="btn-submit" @click="submit">
					<text>确 认</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import selectWeather from '@/components/tool-select/select-weather.vue';
	import {
		dateFormat
	} from '@/common/util.js';
	export default {
		components: {
			selectWeather
		},
		data() {
			return {
				checkResult: [],
				options: {},
				listData: [],
				info: {
					lat: '', //经度
					lon: '', //纬度
					vehCode: "",
					trailerVehCode: "",
					mileage: '',
					datetime: dateFormat(),
					weather: "",
					fileList: [],
					carState: {},
					logContent: '',
					list: []
				},
				carState: [{
					name: '正常',
					value: '0'
				}, {
					name: '异常',
					value: '1'
				}, {
					name: '已检修',
					value: '2'
				}],
				fileObj: {}
			};
		},
		watch: {},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option); //打印出上个页面传递的参数。
			this.options = option
			this.info.vehCode = option.vehCode
			this.info.trailerVehCode = option.trailerVehCode
			uni.getLocation({
				success: (location) => {
					this.info.lat = location.latitude;
					this.info.lon = location.longitude;
				}
			})
		},
		mounted() {
			this.initData()
		},
		onUnload() {
		   if (this.options.type == 2) {
		  
		   uni.navigateBack({
		     delta: 1
		   });
		 
		   }
		
		   
		  },
		methods: {
			radioChange(e, id) {
				this.info.carState[id] = e.detail.value;
			},
			//初始化数据
			initData() {
				this.$api.ccqInit({
					'checkType': '10'
				}).then(res => {
					// console.log(res, "/////////")
					if (res.data.code == 200) {
						res.data.data.forEach(item => {
							this.checkResult.push([false, false, false])
						});
						this.listData = res.data.data
					}
				}).catch();
			},
			radioChange(e, id) {
				this.info.carState[id] = e.detail.value;
			},
			selectFile() {
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						// console.log(chooseImageRes)
						uni.uploadFile({
							url: 'data-dispatch/upload/toFileManager',
							filePath: chooseImageRes.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								const fileData = uploadFileRes.data ? JSON.parse(uploadFileRes
									.data) : ''
								if (fileData && fileData.code == 200) {
									// console.log(fileData.data)
									this.info.fileList.push({
										upload: fileData.data.path,
										temp: chooseImageRes.tempFilePaths[0]
									})
									// console.log(this.info.fileList, "1111111111")
								}
							}
						});
					}
				});
			},
			fileDel(index) {
				this.info.fileList.splice(index, 1)
			},
			cancel() {
				let pages = getCurrentPages(); // 当前页面
				if (this.options.type == 2) {
					let beforePage = pages[pages.length - 3]; // 上上页
					uni.navigateBack({
						delta: 2, // 上上页
						success: () => {
							beforePage.$vm.reload();
						}
					});
				} else {
					this.$goBack(1, 1); // 上一页
				}
			},
			submit() {
				const formData = this.info;
				if (formData.weather == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择天气'
					})
					return false;
				}
				if (formData.mileage == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入里程表数'
					})
					return false;
				}
				for (let item of this.listData) {
					if (formData.carState[item.id] === undefined) {
						uni.showToast({
							icon: 'none',
							title: '请检查' + item.checkPro
						})
						return false;
					}
				}
				formData.picUrl = formData.fileList.map((item) => {
					return item.upload;
				}).join(',');
				formData.list = this.listData.map((item, index) => {
					return {
						'checkdictId': item.dictId,
						'checkSource': '2',
						'checkDesc': item.checkContent,
						'checkPro': item.checkPro,
						'checkResult': formData.carState[item.id],
					}
				})
				const params = {
					'taskId': this.options.taskId,
					'logType': '10',
					'vehId': this.options.vehId,
					'vehCode': this.options.vehCode,
					'trailerId': this.options.trailerId,
					'trailerVehCode': this.options.trailerVehCode,
					'lon': formData.lon,
					'lat': formData.lat,
					'weather': formData.weather,
					'logContent': formData.logContent,
					'vehMileage': formData.mileage,
					'picUrl': formData.picUrl,
					'list': formData.list
				};
				this.$api.ccqCommit(params).then(res => {
					// console.log(res, "33333333")
					if (res.data.code == 200) {
						uni.showToast({
							title: "出车前检查日志添加成功",
							icon: 'none'
						})
						// this.$goBack('../../task/jy_ts_mg', 5)
						// uni.navigateBack()
						let pages = getCurrentPages(); // 当前页面
						if (this.options.type == 2) {
							let beforePage = pages[pages.length - 3]; // 上上页
							uni.navigateBack({
								delta: 2, // 上上页
								success: () => {
									beforePage.$vm.reload();
								}
							});
						} else if (this.options.type == 1) {
							let beforePage = pages[pages.length - 2]; // 上一页
							uni.navigateBack({
								delta: 1, // 上一页
								success: () => {
									beforePage.$vm.reload();
								}
							});
						} else {
							let beforePage = pages[pages.length - 2]; // 上一页
							uni.navigateBack({
								delta: 1, // 上一页
								success: () => {
									beforePage.$vm.reload();
								}
							});
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				}).catch();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.add-box {
		padding: 20rpx 20rpx;

		.add-btns {
			text-align: center;
			padding: 20rpx 0;

			.btn-cancel,
			.btn-submit {

				display: inline-block;
				margin: 0 30rpx;
				border-radius: 50rpx;
				padding: 0 80rpx;
				font-size: 32rpx;
			}

			.btn-cancel {
				border: 2rpx solid #CCCCCC;
				line-height: 70rpx;
			}

			.btn-submit {
				line-height: 70rpx;
				background-color: $app-color;
			}
		}
	}

	.info {
		background-color: #fff;
		margin-bottom: 20rpx;

		.info-label {
			position: relative;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #F2F2F2;

			text {
				font-size: 32rpx;
			}

			&::after {
				content: "";
				position: absolute;
				left: -30rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 38rpx;
				background-color: $app-color;
			}
		}

		.info-item {
			display: flex;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #F2F2F2;
			align-items: center;

			.text {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #666666;
				width: 4em;
				text-align: justify;
				text-align-last: justify;
			}

			.input {
				font-size: 30rpx;
				line-height: 40rpx;
				height: 40rpx;
				flex: 1;
				padding: 0 20rpx;
			}

			.city-select {
				flex: 1;
				padding: 0 20rpx;

				::v-deep .input-value-border {
					border: 0;
					line-height: 36rpx;
					height: 36rpx;
				}
			}

			.date-select {
				flex: 1;

				::v-deep .uni-date-x--border {
					border: 0;

					.uni-date-x {
						padding: 0 10rpx;
					}

					.uni-icons {
						display: none;
					}

					.uni-date__x-input {
						line-height: 36rpx;
						height: 36rpx;
					}

					.uni-input-input {
						font-size: 28rpx;
					}
				}
			}

		}

		>.info-item:last-child {
			border-bottom: 0;
		}

		.car-state-group {
			display: flex;

			.car-state-item:nth-child(1),
			.car-state-item:nth-child(2) {
				flex: 1;
			}
		}

		.info-content {
			font-size: 32rpx;
			line-height: 1.5em;
			padding: 1em 0;
			text-align: justify;
		}

		.info-textarea {
			width: 100%;
			font-size: 32rpx;
			line-height: 1.5em;
			height: 6em;
		}


		.file-list {
			.file-item {
				float: left;
				width: 22%;
				text-align: center;
				height: 20vw;
				line-height: 20vw;
				margin-right: calc(4%);
				position: relative;

				.file-img {
					max-width: 100%;
					max-height: 100%;
					vertical-align: middle;
				}

				.file-del {
					position: absolute;
					right: 0;
					top: 0;
					transform: translate(30%, -30%);
					border-radius: 50%;
					width: 0;
					height: 0;
					border: 20rpx solid #f00;

					&::after {
						content: "";
						width: 20rpx;
						display: block;
						transform: translate(-50%, -50%);
						background-color: #ffffff;
						height: 4rpx;
					}
				}

				&:nth-child(4n) {
					margin-right: 0;
				}

				&:nth-child(n+5) {
					margin-top: calc(4% / 3);
				}

			}

			.file-upload-btn {
				box-sizing: border-box;
				border: 1rpx solid #ddd;
				background: url('@/static/image/camera.png') no-repeat center;
				background-size: 70%;
			}
		}
	}
</style>
